@use "../../variables.scss" as *;

.spg-tagbox.spg-tagbox {
    background-color: var(--ctr-editor-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
    border-radius: var(--ctr-editor-corner-radius, var(--sjs-corner-radius-x075));
    box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1))
        var(--ctr-editor-border-color, var(--sjs-border-10, #dcdcdcff));
    transition: box-shadow $creator-transition-duration;

    &:focus-within {
        box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, var(--sjs-stroke-x2))
            var(--ctr-editor-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
    }
}
.spg-tagbox__value.spg-tagbox__value {
    gap: var(--ctr-tag-box-gap, var(--sjs-spacing-x05));
    overflow: visible;
}

.spg-tagbox__value {
    .sv-tagbox__item {
        padding: var(--ctr-tag-box-item-padding-top, var(--sjs-spacing-x1))
            var(--ctr-tag-box-item-padding-right, var(--sjs-spacing-x150))
            var(--ctr-tag-box-item-padding-bottom, var(--sjs-spacing-x1))
            var(--ctr-tag-box-item-padding-left, var(--sjs-spacing-x150));

        border-radius: var(--ctr-tag-box-item-corner-radius, var(--sjs-corner-radius-x025));
        box-shadow: inset 0 0 0 var(--ctr-tag-box-item-border-width, var(--sjs-stroke-x1))
            var(--ctr-tag-box-item-border-color, var(--sjs-border-default, #d4d4d4));
        background: var(--ctr-tag-box-item-background-color, var(--sjs-layer-1-background-500, #ffffff));
    }

    .sv-tagbox__item-text {
        @include ctrDefaultBoldFont;
        color: var(--ctr-tag-box-item-text-color, var(--sjs-primary-background-500, #19b394));
    }
}

.spg-tagbox-item_clean-button {
    background: linear-gradient(
        270deg,
        var(--ctr-tag-box-item-mask-color-1, var(--sjs-primary-foreground-100, #ffffff)) 50%,
        var(--ctr-tag-box-item-mask-color-2, var(--sjs-primary-foreground-25, #ffffff40)) 100%
    );
}

.spg-tagbox-item_clean-button-svg use {
    fill: var(--ctr-tag-box-item-remove-button-icon-color, var(--sjs-primary-background-500, #19b394ff));
}

.spg-tagbox-item_clean-button-svg:hover {
    border-radius: var(--ctr-tag-box-item-remove-button-corner-radius, var(--sjs-corner-radius-round));
    background: var(
        --ctr-tag-box-item-remove-button-background-color-hovered,
        var(--sjs-primary-background-10, #19b3941a)
    );
}
